<template>
    <div>
        <div class="list-comment">
            <div class="list-comment-first">
                <div class="iconfont list-comment-twist">&#xe60c;</div>
                <div class="iconfont list-comment-third">&#xe870;&#xe870;&#xe870;&#xe870;&#xe870;</div>
                <span class="list-comment-forth">4.9分</span>
                <div class="list-comment-number">
                    18576评论
                    <span class="iconfont number-icon">&#xe65f;</span>
                </div>
            </div>
        </div>
        <div class="list-time">
            <div class="list-time-first">
                <div class="iconfont list-time-twist">&#x100dc;</div>
                <div class="list-time-third">(2-14 ~ 2-15) : 09:00 ~ 12:00开放, 11:30停止开放</div>
            </div>
        </div>
        <div class="item" v-for="(item, index) of list" :key="index">
            <div class="item-title border-bottom">
                <span class="item-title-icon"></span>
                {{  item.title  }}
            </div>
            <!-- <div v-if="item.children" class="item-children">
                <detail-list :list="item.children"></detail-list>
            </div> -->
            <div class="item-Subtitle border-bottom">
                <div class="item-Subtitle-left">
                    <p class="Subtitle-left-title">[ 春节特惠 ]大连圣亚海洋世界五馆单人票</p>
                    <p class="Subtitle-left-introduce">含海洋世界+珊瑚世界+极地世界+深海世界</p>
                </div>
                <div class="item-Subtitle-right">
                    <span class="Subtitle-right-money">￥182元</span>
                    <span class="Subtitle-right-qi">起</span>
                    <span class="iconfont Subtitle-right-icon">&#xe65f;</span>
                </div>
            </div>
        </div>
        <div class="list-lastcomment">
            <div class="list-lastcomment-block"></div>
            <div class="list-lastcomment-bg border-bottom">
                <span class="iconfont list-lastcomment-icon">&#x100e1;</span>
                <span class="list-lastcomment-title">用户评论</span>
            </div>
            <div class="list-lastcomment-first">
                <div class="lastcomment-first-bg">
                    <div class="iconfont lastcomment-first-title">&#xe870;&#xe870;&#xe870;&#xe870;&#xe870;</div>
                    <div class="lastcomment-first-msg">Q*2 2017-10-16</div>
                </div>
                <div class="lastcomment-first-comment">
                    一直都很想去极地海洋世界的，终于在上个周末出发了，不过时间没安排好，到的已经是下午2点钟了，那里是5点钟就闭园的，建议大家早早的就去。里面有许多极地动物北极熊、企鹅、北极狼。当然一些大众的海洋动物也是必不可少的
                </div>
                <div class="lastcomment-first-bg">
                    <div class="iconfont lastcomment-first-title">&#xe870;&#xe870;&#xe870;&#xe870;&#xe870;</div>
                    <div class="lastcomment-first-msg">Q*2 2017-10-16</div>
                </div>
                <div class="lastcomment-first-comment">
                    一直都很想去极地海洋世界的，终于在上个周末出发了，不过时间没安排好，到的已经是下午2点钟了，那里是5点钟就闭园的，建议大家早早的就去。里面有许多极地动物北极熊、企鹅、北极狼。当然一些大众的海洋动物也是必不可少的
                </div>
                <div class="lastcomment-first-bg">
                    <div class="iconfont lastcomment-first-title">&#xe870;&#xe870;&#xe870;&#xe870;&#xe870;</div>
                    <div class="lastcomment-first-msg">Q*2 2017-10-16</div>
                </div>
                <div class="lastcomment-first-comment">
                    一直都很想去极地海洋世界的，终于在上个周末出发了，不过时间没安排好，到的已经是下午2点钟了，那里是5点钟就闭园的，建议大家早早的就去。里面有许多极地动物北极熊、企鹅、北极狼。当然一些大众的海洋动物也是必不可少的
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'detailList',
    props: {
        list: Array
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
    @import '~styles/varibles.styl'
    .list-comment
        height: 1rem
        line-height: 1rem
        background: rgba(0, 0, 0, .05)
        .list-comment-first
            position: relative
            display: flex
            height: .8rem
            line-height: .8rem
            background: white
            .list-comment-twist
                padding-left: .2rem
            .list-comment-third
                margin-left: .2rem
                color: orange
            .list-comment-forth
                margin-left: .4rem
                color: orange
            .list-comment-number
                position: absolute
                left: 5.3rem
                color: grey
                .number-icon
                    font-size: 14px
    .list-time
        height: 1rem
        line-height: 1rem
        background: rgba(0, 0, 0, .05)
        .list-time-first
            display: flex
            height: .8rem
            line-height: .8rem
            background: #F7B881
            .list-time-twist
                padding-left: .2rem
                color: #CC0000
            .list-time-third
                margin-left: .2rem
                width: 80%
                ellipsis()
                color: #CC0000
    .item-title
        line-height: .8rem
        height: .8rem
        padding: 0 .2rem
    .item-title-icon
        position: relative
        left: .06rem
        top: .08rem
        display: inline-block
        width: .36rem
        height: .36rem
        background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
        margin-right: .04rem
        background-size: .4rem 3rem
    .item-children
        padding: 0 .2rem
    .list-comment
        height: 1rem
        line-height: 1rem
        background: rgba(0, 0, 0, .05)
        .list-comment-number
            position: relative
            left: 0
            top: 0
            padding: 0 .2rem
    .item-Subtitle
        display: flex
        height: 1.5rem
        .item-Subtitle-left
            height: .8rem
            padding-left: .32rem
            width: 68%
            .Subtitle-left-title
                position: absolute
                top: 0
                left: .3rem
                height: .8rem
                line-height: .4rem
                width: 4.6rem
                padding-top: .3rem
                font-size: 15px
            .Subtitle-left-introduce
                margin-left: 1rem
                margin-top: .8rem
                font-size: 14px
                color: grey
                width: 75%
                ellipsis()
        .item-Subtitle-right
            height: 1.5rem
            line-height: 1.5rem
            .Subtitle-right-money
                color: orange
                font-size: 16px
            .Subtitle-right-qi
                color: grey
                font-size: 10px
            .Subtitle-right-icon
                font-size: 14px
    .list-lastcomment
        height: 5rem
        background: rgba(0, 0, 0, .04)
        .list-lastcomment-block
            height: .07rem
            line-height: .07rem
        .list-lastcomment-bg
            height: .8rem
            line-height: .8rem
            margin-top: .2rem
            background: white
            .list-lastcomment-icon
                padding-left: .2rem
                color: $bgColor
        .list-lastcomment-first
            height: 4.2rem
            background: white
            .lastcomment-first-bg
                display: flex
                height: .8rem
                line-height: .8rem
                color: white
                .lastcomment-first-title
                    padding-left: .2rem
                    color: orange
                .lastcomment-first-msg
                    margin-left: 3.5rem
                    font-size: 14px
                    color: black
            .lastcomment-first-comment
                padding: 0 .2rem
                line-height: .4rem
</style>
